<template>
  <div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      label-position="right"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="审批单号：" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.sn" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：" style="margin-bottom: 0px;">
            <ToolTip :content="format(baseInfo.createTime,'YYYY/MM/DD HH:mm:ss')" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人：" style="margin-bottom: 0px;">
            <CheckUserInfo v-if="baseInfo.createUser" :label="baseInfo.createUser" :user-id="baseInfo.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门：" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.department" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人：" style="margin-bottom: 0px;">
            <CheckUserInfo v-if="baseInfo.proposer" :label="baseInfo.proposer" :user-id="baseInfo.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请部门：" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.proposerDepartment" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司：" style="margin-bottom: 0px;">
            <ToolTip :content="baseInfo.ourTitle" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="还款说明：" style="margin-bottom: 0px;">
            <div class="flex-center">
              <ToolTip :content="baseInfo.description" placement="top-start"/>
              <span v-if="canEdit" class="link ml10 nowrap" @click="descriptionEdit">编辑</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="借款欠额(元)：" style="margin-bottom: 0px;">
            <div :style="`${showMobilePage ? 'flex-wrap: wrap' : ''}`" class="flex-center">
              <PriceColumn :real-val="baseInfo.dueAmount" :price="baseInfo.dueAmount / 100" />
              <p class="flex" style="margin-top:0;margin-bottom:0;color: #999">
                （实时：<span style="color: #31CC9C">
                  <PriceColumn :real-val="baseInfo.reallyAmount" :price="baseInfo.reallyAmount / 100" class="inline" />
                </span>）
              </p>
              <el-tooltip placement="top" effect="dark">
                <div slot="content" class="max-width-200">
                  <div>1.借款欠额=借款金额-还款金额-冲抵借款欠额-转交欠款+被转交欠款</div>
                  <div>2.当付款后借款欠额将进行快照，实时值为即时统计</div>
                </div>
                <tipIcon is-diy/>
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="还款金额(元)：" style="margin-bottom: 0px;">
            <PriceColumn :real-val="baseInfo.backAmount" :price="baseInfo.backAmount / 100" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：" style="margin-bottom: 0px;">
            <FileShowList v-if="baseInfo.attachment && baseInfo.attachment.length" :file-list="baseInfo.attachment" style="max-width:100%;"/>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { format } from '@/filters/date';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { mapState } from 'vuex';

export default {
  components: {
    FileShowList
  },
  props: {
    baseInfo: {// 详情信息
      type: Object,
      default: () => {
      }
    },
    isExamine: {// 是否当前审批人
      type: Boolean,
      default: false
    },
    isCurrentVersion: {// 是否当前版本
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      format
    };
  },
  computed: {
    canEdit() {
      return this.baseInfo.hasEditEvent && this.isExamine && this.isCurrentVersion;
    },
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    descriptionEdit() {
      this.$emit('descriptionEdit');
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-form {
  & ::v-deep {
    .el-form-item {
      .el-form-item__label {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999 !important;
        opacity: 1;
        line-height: 30px;
      }
    }
    .el-form-item__content {
      font-size: 14px;
      font-family: PingFang SC;
      line-height: 30px;
      font-weight: 400;
      color: #333333;
      opacity: 1;
    }
  }
}
.link{
  color: #406EFF;
  cursor: pointer;
}
.inline{
  display: inline;
}
.dividing{
  &::v-deep {
    .el-col {
      .el-form-item__content {
        border-right: 1px solid #EBEEFD;
      }
      &:nth-child(2n) {
        .el-form-item__content {
          border-right: none;
        }
      }
      &:last-child {
        .el-form-item__content {
          border-right: none;
        }
      }
    }
  }
}
</style>
